import { PageContainer, View } from "@tarojs/components";
import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";
import AccountList from "./accountList";
import { VibrateShort } from "@/utils";
import "./index.scss"

let inited = false
const AccountSelecter: React.FC<{
    show: boolean,
    onClose: () => void
}> = observer(({ show, onClose }) => {
    const [isVisible, setIsVisible] = useState<boolean>(false)
    useEffect(() => {
        if (show) {
            setIsVisible(true)
        } else {
            setTimeout(() => {                
                setIsVisible(false)
            }, 500)
        }
        if (show) {
            inited = true
        }
        if (inited) {
            VibrateShort()
        }
    }, [show])
    
    return (
        <>
            {
                isVisible ? <PageContainer show={show} onLeave={onClose} overlay round zIndex={9999}>
                    <View className="dialog-content-container card-background flex-column flex-item">
                        <AccountList close={() => onClose()}></AccountList>
                    </View>
                </PageContainer> : null
            }
        </>
    )
})

export default AccountSelecter